import React, { PropTypes, Component } from 'react'
import fetch from 'isomorphic-fetch'
import { Link } from 'react-router'
import { myAjax, ROOTURL } from './../publicAPI/publicAPI'
import NavLink from './NavLink'
import TextInput from './TextInput'
import SelectInput from './SelectInput'
import CheckboxInput from './CheckboxInput'
import Table from './Table'

class CustomerM extends Component {
    //初始化
    constructor(props, context) {
        super(props, context)
        console.log("初始化")
        var _rWapperHeigh = window.innerHeight - 55

        this.state = {
              
                isCheck: false,
                rHeight: _rWapperHeigh,
                select_show: "none",
                customer: [],
                toBeEnd:false,
        } // 初始化状态
        this.start=0;

        this.page=1;
    }

    componentWillMount() {

     this.findCustomer("","");
    }

    componentDidMount() {
        console.log("安装成功")
    }
    findCustomer(dname,phone){
        //console.log(dname);
        //console.log(phone);
        let _this=this
        let params={
             "order":
            [           // ORDER BY  
                    ["id", "DESC"],    // id ASC,
         
            ],
            "limit":10,
            

        }
        console.log("find:"+this.state.page)
        if(dname!=""){
        params={
           "where":
            {"dname":
                [
                    ["eq",dname]
                ],
             
            },
            "order":
                [           // ORDER BY  
                    ["id", "DESC"],    // id ASC,
         
            ],
            "limit":10,
            
         }
        }
        else if(phone!=""){
            params={
            "where":
                {"phone":
                [
                    ["eq",phone]
                ],
             
                },
             "order":
                [           // ORDER BY  
                    ["id", "DESC"],    // id ASC,
         
                ],
                 "limit":10,
               
            }
        }

        else if(phone!=""&&dname!=""){
            params={
             "where":{
                "phone":
                [
                    ["eq",phone]
                ],
                "dname":
                [
                    ["eq",dname]
                ],
              },
               "order":
                [           // ORDER BY  
                    ["id", "DESC"],    // id ASC,
         
                ],
                 "limit":10,
                

            }
        }    




        
        fetch(ROOTURL+'customer/profile/search.api',{
                method: 'post',
                headers: {
                    "Content-type": "application/json; charset=UTF-8"
                },
        
                body:JSON.stringify(params)
        }).then(response=>{return response.json()})
        .then(data=>
           // data.map(function(index, elem) {
             //   fetch(ROOTURL+'customer/profile/search.api'+?id=elem.customer,{
             //   method: 'get'
             //   })
           // })

        _this.setState({
         customer:data
       })


        )
        
            
    }
  
    //查找接口
    handleSearchClick(e) {
            let dname=this.refs.dname.value;
            let phone=this.refs.phone.value;
            this.findCustomer(dname,phone);
    }
        
        //翻页按钮
    handlePageClick(e) { //1为下一页，2为上一页
        let _buttonValue = e.target.value;
        let next=document.getElementsByClassName("next")[0];
        let prev=document.getElementsByClassName("prev")[0];
        console.log(document.getElementsByClassName("next"));
        //let _this=this;
        console.log(this.page);
        if (_buttonValue == 1) {
          
          this.start=this.start+9;
          this.page++;
          prev.style.display="block";

        } else {
          this.start=this.start-9;
          this.page--;
          next.style.display="block";
        }
        let params={
             "order":
            [           // ORDER BY  
                    ["id", "DESC"],    // id ASC,
         
            ],
            "start":this.start,//
            "limit":10

        }







        if(this.start>=0){//如果当前页页码是负数则不请求数据
        //console.log("currentPage:"+currentPage);
         fetch(ROOTURL+'customer/profile/search.api',{
                method: 'post',
                headers: {
                    "Content-type": "application/json; charset=UTF-8"
                },
        
                body:JSON.stringify(params)
        }).then(response=>{return response.json()})
        .then(data=>{

        if(data.length<10){
        
        
        next.style.display="none";
        }

        this.setState({customer:data});
    

        })
         //console.log("StatePage:"+_this.state.page);
          //console.log("StatetobeEnd:"+_this.state.toBeEnd);
        }
        if(this.page==1){
       
            prev.style.display="none";
        }
        

    }




    //render thead
    tHead() {
            var data = [
                { name: "id" },
                { name: "性别" },
                { name: "昵称" },
                { name: "电话号码" },
                { name:"收货人"},
                { name:"收货地址"},
            ]
            const _headArr = []
            const _width = {
                    "0": "16.6%",
                    "1": "16.6%",
                    "2": "16.6%",
                    "3": "16.6%",
                    "4": "16.6%",
                    "5": "16.6%",

                }
             
     		_headArr.push(data.map((item, index) => < th style = {
                    { width: _width[index] }
                 }
                 role = "1"
                 key = { index } > { item.name } < /th>));
                 return _headArr;
    }


    tBody() {

                 let _data = this.state.customer;
                 console.log(_data);
                 return _data.map(item =>{

                    if(item.meta!=undefined&&item.meta.shopingLoc!=undefined)

                    return( < tr key = { item.openid } >

                     < td > { item.id } < /td> 
                     < td > { item.gender } < /td > 
                     < td > { item.dname } < /td> 
                     < td > { item.phone } < /td >
                     < td > { item.meta.shopingLoc.name} < /td >
                     < td > { item.meta.shopingLoc.address } < /td >

                  


                     < /tr>)

                     else return(
                        < tr key = { item.openid } >
                     < td > { item.id } < /td> 
                     < td > { item.gender } < /td > 
                     < td > { item.dname } < /td> 
                     < td > { item.phone } < /td >
                     </tr>

                     )




                     });
    }

    render() {
        
        return (
                <div className="right-wapper" style={{height: this.state.rHeight}}>
                <div className="rt-wrap rt-wrap-header">
                    <div className="input-div pr">
                        <label>昵称：</label>
                        <input type="text" placeholder="请输入要查找的微信号" className="default-text"
                           ref="dname"/>
                    </div>
                    <div className="input-div">
                        <label>电话号码：</label>
                        <input type="text" placeholder="请输入要查找的电话号码" className="default-text"
                           ref="phone" />
                    </div>
                    <div className="input-div">
                        <button className="search-btn" onClick={(e) => this.handleSearchClick(e)}>查找</button>
                    </div>
                    
                </div>
                    
                <div className="rt-wrap">
                    <h3 className="catagory">
                        <span className="cata-title">客户列表</span>
                        <button className="next" value="1" onClick={(e) => this.handlePageClick(e)}></button>
                        <button style={{display:'none'}} className="prev" value="2" onClick={(e) => this.handlePageClick(e)}></button>
                    </h3>
                    <Table tHead={this.tHead.bind(this)()} tBody={this.tBody.bind(this)()}/>
                </div>
                
            </div>

        );
    }
}
export default CustomerM
